<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>fullPage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="Description...">
    <meta name="keywords" content="keyword1,keyword2,keyword3..">
    <meta name="author" content="chriswang,396276123@qq.com">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <style type="text/css">
        html {
            -ms-touch-action: none;
            /* 阻止windows Phone 的默认触摸事件 */
        }
        
        body,
        div,
        p,
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        body {
            width: 100%;
            *cursor: default;
            overflow: hidden;
            font: 16px/1.5 "Microsoft YaHei", Helvetica, STHeiti STXihei, Microsoft JhengHei, Arial;
        }
        
        #pageContain {
            overflow: hidden;
        }
        
        .page {
            display: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .contain {
            width: 100%;
            height: 100%;
            display: none;
            position: relative;
            z-index: 0;
        }
        
        .current .contain,
        .slide .contain {
            display: block;
        }
        
        .current {
            display: block;
            z-index: 1;
        }
        
        .slide {
            display: block;
            z-index: 2;
        }
        
        .swipe {
            display: block;
            z-index: 3;
            transition-duration: 0ms !important;
            -webkit-transition-duration: 0ms !important;
        }
        
        .page1 {
            background: #37c1e3;
        }
        
        .page2 {
            background: #009922;
        }
        
        .page3 {
            background: #992211;
        }
        
        .page4 {
            background: #ff00ff;
        }
        
        .page5 {
            background: #00ff00;
        }
        
        .page6 {
            background: #22ffff;
        }
        
        #navBar {
            z-index: 3;
            position: absolute;
            font-size: 0px;
            line-height: 0;
            bottom: 10px;
            text-align: center;
            width: 200px;
            left: 50%;
            margin-left: -100px;
        }
        
        #navBar .active {
            background: #ccc;
        }
        
        #navBar li {
            background: transparent;
            border: 1px solid #ccc;
            display: inline-block;
            font-size: 0px;
            margin: 0 4px;
            *float: left;
            *zoom: 1;
            cursor: pointer;
            transition: all .7s ease;
            border-radius: 50%;
            line-height: 10px;
            text-align: center;
            width: 10px;
            height: 10px;
        }
        
        #prev,
        #next {
            z-index: 4;
            text-align: center;
            line-height: 40px;
            position: absolute;
            width: 40px;
            height: 40px;
            top: 50%;
            cursor: pointer;
            margin-top: -20px;
        }
        
        #prev {
            left: 0
        }
        
        #next {
            right: 0
        }
        
        .nav {
            z-index: 5;
            position: fixed;
            _position: absolute;
            background: #fff;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            line-height: 60px;
        }
        
        .nav li {
            display: inline;
            float: right;
            margin: 0 12px;
        }
    </style>
</head>
<!--[if lte IE 7]>      
<body scroll="no"> 
<![endif]-->
<!--[if gt IE 7]><!-->

<body>
    <!--<![endif]-->
    <div class="nav">
        <ul>
            <li data-menuanchor="page1">ABOUT</li>
            <li data-menuanchor="page2">VIEW</li>
            <li>CASE</li>
            <li>SERVICE</li>
            <li>HOME</li>
        </ul>
    </div>
    <div id="pageContain">

        <div class="page page1 current">
            <div class="contain">

            </div>
        </div>

        <div class="page page2">
            <div class="contain">

            </div>
        </div>

        <div class="page page3">
            <div class="contain">

            </div>
        </div>

        <div class="page page4">
            <div class="contain">

            </div>
        </div>
    </div>
    <ul id="navBar">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="prev">&lt;</div>
    <div id="next">&gt;</div>

    <script type="text/javascript" src="js/fullPage.min.js"></script>
    <script type="text/javascript">
        var runPage,
            interval,
            autoPlay;

        autoPlay = function(to) {

            clearTimeout(interval);
            interval = setTimeout(function() {
                runPage.go(to);
            }, 3000);

        }

        runPage = new FullPage({

            id: 'pageContain', // id of contain
            slideTime: 800, // time of slide
            effect: { // slide effect
                transform: {
                    translate: 'X', // 'X'|'Y'|'XY'|'none'
                    scale: [1, 1], // [scalefrom, scaleto]
                    rotate: [0, 0] // [rotatefrom, rotateto]
                },
                opacity: [0, 1] // [opacityfrom, opacityto]
            },
            mode: 'touch,nav:navBar', // mode of fullpage
            easing: [0, .93, .39, .98], // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
            callback: function(index, thisPage) { // callback when pageChange

                index = index + 1 > 3 ? 0 : index + 1;
                autoPlay(index);
            }
        });

        interval = setTimeout(function() {
            runPage.go(runPage.thisPage() + 1);
        }, 3000);
    </script>

    <script type="text/javascript">
        var prev = document.getElementById('prev'),
            next = document.getElementById('next');

        prev.onclick = function() {
            runPage.go(runPage.thisPage() - 1);
        }
        next.onclick = function() {
            runPage.go(runPage.thisPage() + 1);
        }
    </script>
</body>

</html>